<template>
  <div class="example-container">
    <comp-scroll
      ref="scrollRef"
      height="calc(100vh - 100rpx)"
      :refresherEnabled="true"
      :isEmpty="list.length === 0"
      :loadAll="loadAll"
      @refresh="handleRefresh"
      @loadMore="handleLoadMore"
      @scroll="handleScroll"
    >
      <!-- 自定义下拉刷新 (可选) -->
      <template #refresher>
        <div class="custom-refresher">
          <span>{{ isRefreshing ? '努力加载中...' : '下拉刷新数据' }}</span>
        </div>
      </template>

      <!-- 列表内容 -->
      <div class="list-container">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="list-item"
        >
          <div class="item-content">
            <span class="item-title">{{ item.title }}</span>
            <span class="item-desc">{{ item.description }}</span>
          </div>
        </div>
      </div>

      <!-- 自定义底部加载 (可选) -->
      <template #loading-more>
        <div class="custom-loading-more">
          <span v-if="isLoadingMore">加载更多数据中...</span>
          <span v-else-if="loadAll">已经到底啦~</span>
          <span v-else>上拉加载更多</span>
        </div>
      </template>

      <!-- 自定义空状态 (可选) -->
      <template #empty>
        <div class="custom-empty">
          <span>暂无数据，下拉刷新试试~</span>
        </div>
      </template>
    </comp-scroll>

    <!-- 底部操作栏 -->
    <div class="bottom-bar">
      <div class="btn" @click="scrollToTop">回到顶部</div>
      <div class="btn" @click="resetScroll">重置</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import CompScroll from './Index.vue'

// 列表数据
interface ListItem {
  id: number
  title: string
  description: string
}

const list = ref<ListItem[]>([])
const page = ref(1)
const pageSize = ref(10)
const loadAll = ref(false)
const isRefreshing = ref(false)
const isLoadingMore = ref(false)

// 获取组件实例
const scrollRef = ref<InstanceType<typeof CompScroll> | null>(null)

// 模拟获取数据
const fetchData = (isRefresh = false): Promise<ListItem[]> => {
  return new Promise((resolve) => {
    // 模拟网络请求
    setTimeout(() => {
      if (isRefresh) {
        page.value = 1
      }
      
      // 模拟数据
      const currentPage = page.value
      const hasMore = currentPage < 5 // 模拟只有5页数据
      
      if (!hasMore) {
        resolve([])
        return
      }
      
      const newData: ListItem[] = Array.from({ length: pageSize.value }, (_, i) => {
        const itemIndex = (currentPage - 1) * pageSize.value + i + 1
        return {
          id: itemIndex,
          title: `标题 ${itemIndex}`,
          description: `这是第 ${itemIndex} 条数据的详细描述信息，用于测试列表渲染。`
        }
      })
      
      resolve(newData)
    }, 1000) // 模拟网络延迟
  })
}

// 下拉刷新处理
const handleRefresh = async () => {
  isRefreshing.value = true
  try {
    const data = await fetchData(true)
    list.value = data
    loadAll.value = data.length < pageSize.value
  } catch (error) {
    console.error('刷新失败', error)
  } finally {
    isRefreshing.value = false
    // 通知组件刷新完成
    scrollRef.value?.finishRefresh()
  }
}

// 上拉加载更多处理
const handleLoadMore = async () => {
  if (loadAll.value || isLoadingMore.value) return
  
  isLoadingMore.value = true
  try {
    page.value++
    const data = await fetchData()
    
    if (data.length === 0) {
      loadAll.value = true
    } else {
      list.value = [...list.value, ...data]
      loadAll.value = data.length < pageSize.value
    }
  } catch (error) {
    console.error('加载更多失败', error)
    page.value-- // 恢复页码
  } finally {
    isLoadingMore.value = false
    // 通知组件加载更多完成
    scrollRef.value?.finishLoadMore(loadAll.value)
  }
}

// 滚动事件处理
const handleScroll = (detail: { scrollTop: number; direction: 'up' | 'down' }) => {
  console.log('滚动位置:', detail.scrollTop, '方向:', detail.direction)
  // 可以根据滚动位置和方向做一些操作，比如显示/隐藏回到顶部按钮等
}

// 回到顶部
const scrollToTop = () => {
  scrollRef.value?.scrollToTop()
}

// 重置列表
const resetScroll = () => {
  list.value = []
  page.value = 1
  loadAll.value = false
  scrollRef.value?.reset()
  // 重置后自动刷新
  handleRefresh()
}

// 组件挂载后自动加载第一页数据
onMounted(() => {
  handleRefresh()
})
</script>

<style scoped>
.example-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}

.list-container {
  padding: 20rpx;
}

.list-item {
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.item-content {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #333;
}

.item-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.custom-refresher,
.custom-loading-more,
.custom-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
  color: #666;
  font-size: 28rpx;
}

.custom-empty {
  height: 300rpx;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.btn {
  padding: 15rpx 40rpx;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 8rpx;
  font-size: 28rpx;
}
</style>